<!--
 * @Date: 2022-03-01 09:54:34
 * @Author: 陶子
 * @LastEditTime: 2023-05-23 16:26:51
 * @FilePath: \jk_one-stop_pc\src\views\qualityManagement\qualityRecord\qualityDetail.vue
 * @pageName: 这是--(质检详情)--页面
-->
<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['质量管理','质检记录']" currentMenu="质检详情">
    </crumbs>
    <div class="uni-card" :style="{paddingBottom:'24px'}">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">申请单号</p>
            <p class="secondary-text">{{ workOrderInfo.applyNo || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">提交人</p>
            <p class="secondary-text">{{ workOrderInfo.applicantName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">提交时间</p>
            <p class="secondary-text" v-if="workOrderInfo.applyTime">{{ workOrderInfo.applyTime}}</p>
            <p class="secondary-text" v-else>--</p>
          </div>
        </div>
        <div class="wrapRight">
          <flow-status ids="MESS_TASK_REPORT_WORK_APPLY_FOR_QUALITY" :flowStatusText="workOrderInfo.flowStatusName" :flowStatus="workOrderInfo.flowStatus"></flow-status>

          <!-- <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
          </div> -->
        </div>
      </div>
    </div>
    <div class="cards-box">
      <div>
        <a-card title="工序信息" :bordered="false" style="margin-top:12px" v-if="workOrderInfo.taskDetail">
          <div class="item-wrap" style="box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">工单编号</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.orderCode  || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">生产产品</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.goodsName || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">规格</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.goodsSpec  || '-' }}</p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style=" margin-top: 40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">工序</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.processName || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">基本单位</p>
                <p class="secondary-text">{{  workOrderInfo.taskDetail.goodsBasicUnitText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">可报工数</p>
                <p class="secondary-text">{{  workOrderInfo.taskDetail.availableNumForReport}}</p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style=" margin-top: 40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">报工单位</p>
                <p class="secondary-text">{{workOrderInfo.taskDetail.processWorkUnitText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">工序进度 <a-tooltip>
                    <template slot="title">
                      当前工序报工总数/生产计划数（报工单位）
                    </template>
                    <a-icon type="question-circle" theme="filled" style='color:rgba(170, 170, 170,.8)' />
                  </a-tooltip>
                </p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.reportNum}}/{{ workOrderInfo.taskDetail.taskPlanNum || '0' }}</p>
                <div class="havePadding">
                  <a-progress :percent="workOrderInfo.taskDetail.completePercent" :strokeWidth="5" :showInfo='false' :strokeColor='checkColor(workOrderInfo.taskDetail.completePercent)' />
                  <span>{{ workOrderInfo.taskDetail.completePercent}}%</span>
                </div>
              </div>
              <div class="detail-item">
                <p class="subtitle">计划时间</p>
                <p class="secondary-text" v-if="workOrderInfo.taskDetail.planStartTime">{{moment(workOrderInfo.taskDetail.planStartTime).format('YYYY-MM-DD HH:mm')}} ~ {{moment(workOrderInfo.taskDetail.planEndTime).format('YYYY-MM-DD HH:mm')}}</p>
                <p class="secondary-text" v-else>--</p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style=" margin-top: 40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">设备</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.deviceName || '-' }}</p>
              </div>
              <div class="detail-item" style="flex:2">
                <p class="subtitle">工序要求</p>
                <p class="secondary-text">{{ workOrderInfo.taskDetail.processRequire || '-' }}</p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="操作报工" :bordered="false" style="margin-top:12px">
          <div class="item-wrap" style="box-sizing:border-box;padding:0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">批次编号</p>
                <p class="btn-text" @click="batchRecord">{{ workOrderInfo.batchCode   || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">操作人</p>
                <p class="secondary-text">{{ workOrderInfo.operatorName   || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">报工数</p>
                <p class="secondary-text">{{numFormat(workOrderInfo.reportWorkNum )|| '0' }}</p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style=" margin-top: 40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">合格数</p>
                <p class="secondary-text">{{numFormat(workOrderInfo.qualifiedNum) || '0' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">不合格数</p>
                <p class="secondary-text">{{ numFormat(workOrderInfo.notQualifiedNum) || '0' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
          <div class="item-wrap" style=" margin-top: 40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">不合格原因</p>
                <p class="secondary-text">{{ workOrderInfo.notQualifiedReason || '-'}}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="wrapRight" style="width:110px">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color:#1890FF;font-size:16px"></p>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="其他信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">备注</p>
              <p class="secondary-text">{{ workOrderInfo.remark || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px;box-sizing:border-box;padding:0 0 0 4px;">
            <div style="width:100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="workOrderInfo.attachment"></file-detail>
            </div>
          </div>
        </a-card>
        <div style="margin-top: 12px" v-if="workOrderInfo.flowInstId">
          <Examine  type="2" :id="workOrderInfo.flowInstId" ref="examine" />
          <div style="height: 50px"></div>
        </div>
      </div>
    </div>
    <batch-production ref="BatchProduction"></batch-production>
  </jke-modal>
</template>
<script>
import moment from 'moment'
import {numFormat } from '@/utils/util'
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { recordDetailApi } from '@/api/productOrder'
import FlowStatus from '@/pubComponent/FlowStatus'
import Examine from '@/components/examine'
import BatchProduction from '@/pubComponent/BatchProduction'
export default {
  data() {
    return {
      jkeForm: {
        title: '质检详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      moment,
      numFormat,
      parentId: '',
      workOrderInfo: {},
      reasonArr: [],
    }
  },
  components: {
    crumbs,
    FileDetail,
    Examine,
    FlowStatus,
    BatchProduction
  },
  methods: {
    // 批次生产记录弹窗列表
    batchRecord() {
      let obj = {
        id: this.workOrderInfo.batchId,
        orderId: this.workOrderInfo.orderId,
        batchCode: this.workOrderInfo.batchCode,
      }
      this.$refs.BatchProduction.showModal(obj,'BATCH_PRODUCTION_QUALITY_DETAIL')
    },
    checkColor(value) {
      if (value == 0) {
        return '#DFDFDF'
      } else if (value >= 100) {
        return '#00B042'
      } else {
        return '#1890FF'
      }
    },
    /* 面包屑返回 */
    goBack() {
      this.$router.go(-1)
    },
    initDetail(parentId) {
      this.jkeForm.visible = true
      this.parentId = parentId
      let obj = {
        id: this.parentId,
      }
      recordDetailApi(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.workOrderInfo = res.result
            if (res.result.notQualifiedReasonText) {
              this.reasonArr = res.result.notQualifiedReasonText.split(',')
            } else {
              this.reasonArr = []
            }
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.cards-box {
  height: calc(100vh - 220px);
  overflow-y: scroll;
}
div.explaneBox {
  .flex(flex-end, center);
  margin-bottom: 40px;
  div.one {
    .flex(center, center);

    div.color {
      width: 14px;
      height: 14px;
      background: #dfdfdf;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.two {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.three {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #00b042;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }
}
div.progressBox {
  .flex(flex-start, center);
  flex-wrap: wrap;
  div.itemPro {
    .flex(flex-start, center);
    margin-bottom: 16px;
    &:nth-last-child(1) .itemRight {
      display: none;
    }
    div.itemLeft {
      div.leftTop {
        width: 180px;
        text-align: center;
        font-size: 16px;
        color: #444444;
        margin-bottom: 14px;
      }

      div.leftBot {
        width: 180px;
        height: 116px;
        background: rgba(244, 245, 246, 1);
        border-radius: 6px;
        .flex(space-between, center,column);
        box-sizing: border-box;
        padding: 13px 0;
        div.botOen {
          font-size: 14px;
          color: #888888;
        }

        div.botTwo {
          font-size: 14px;
          color: #888888;
        }

        div.botThree {
          font-size: 14px;
          color: #888888;
        }

        .havePadding {
          .flex(center, center);
          width: 134px;
          font-size: 12px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      height: 2px;
      width: 64px;
      background: #f4f5f6;
      position: relative;
      top: 16px;
    }
  }
}
/deep/ .ant-progress-inner {
  background-color: #dfdfdf;
}
.title {
  span {
    font-size: 14px;
    color: #888888;
  }
}
.havePadding {
  .flex(center, center);
  width: 200px;
  font-size: 12px;
  color: #888888;
}
</style>
